<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="45%" :with-header="false" :width="700" :append-to-body="true">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
            {{ isEdit == "CREATE" ? "新建" : "编辑" }}精彩回顾
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false" />
        </div>
      </div>
      <div class="drawer_content">
        <div class="content-box">
          <div class="label">排序:</div>
          <div class="desc">
            <el-input-number size="mini" v-model="form.sort" :min="1"></el-input-number>
          </div>
        </div>
        <div class="content-box">
          <div class="label">精彩回顾标题:</div>
          <div class="desc">
            <el-input placeholder="请输入精彩回顾标题" v-model="form.title" clearable>
            </el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">精彩回顾图片:</div>
          <div class="desc">
            <div class="tips">
              附图可上传8张图片，图片不超过512KB，仅支持jpg、png格式
            </div>
            <imgUplode :list="form.fileList" @imgList="getImgsUrl" :octopus="octopus" :min="8">
            </imgUplode>
          </div>
        </div>

        <div class="content-box">
          <div class="label">精彩回顾视频:</div>
          <div class="desc">
            <div class="tips">
              仅可上传1条视频，仅支持mp4格式，建议比例16:9
            </div>
            <video v-if="videoUrl" class="video" :src="videoUrl" controls></video>
            <el-upload class="upload-demo" action="#" :http-request="httpRequest" :show-file-list="false"
              :before-upload="beforeUpload" accept=".mp4">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>

        <div class="content-box">
          <div class="label">是否置顶</div>
          <div class="desc">
            <el-radio v-for="item in isTop" v-model="form.isTop" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
          </div>
        </div>

        <div class="content-box">
          <div class="label">精彩回顾详情:</div>
          <div class="right">
          </div>
        </div>
        <div class="desc">
          <quill ref="quill" :octopus="octopus" @quillContent="getQuillContent" :desc="form.deltedContent"
            :isEdit="!['CREATE', 'UPDATE'].includes(isEdit)" :key="getQuillContent"></quill>
        </div>
      </div>
      <div>
        <div class="button_list">
          <button style="background-color: #1E1B19;" @click="save(0)">
            暂存
          </button>
          <button @click="save(2)">发布</button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import imgUplode from "@/components/Components/imgUpdate.vue";
import quill from "@/components/Components/quillEditor.vue";
export default {
  name: "cat_dialog",
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  components: {
    imgUplode,
    quill
  },
  data() {
    return {
      octopus: this.$parent.$parent.octopus,
      drawer: false,
      sourceList: [],
      isTop: [
        {
          id: 0,
          label: "否"
        },
        {
          id: 1,
          label: "是"
        }
      ],
      form: {
        title: "",
        sort: "0",
        fileList: [],
        deltedContent: "",
        source: "",
        isTop: 0,
        status: 1
      },
      rules: {
        title: { required: true, message: "请输入新闻标题" },
        source: { required: true, message: "请输入新闻来源" },
        fileList: { required: true, message: "请上传新闻主图" },
        deltedContent: { required: true, message: "请输入新闻详情" }
      },
      isEdit: "look",
      videoUrl: ''
    };
  },
  created() {
    this.api_1297();
  },
  computed: {},
  watch: {},
  methods: {
    drawerOpen(list = null, type = "look") {
      this.drawer = true;
      this.isEdit = type;
      if (list) {
        this.form.title = list.row.Name;
        this.form.source = this.sourceList.find(x => x.Name == list.row.SourceID).ID//list.row.SourceID;
        this.form.sort = list.row.Sort;
        this.form.fileList =
          list.row.MainImageUrl && JSON.parse(list.row.MainImageUrl);
        this.form.deltedContent = list.row.Content;
        this.form.isTop = list.row.IsTop == "是" ? 1 : 0;
        this.form.ID = list.row.ID;
      } else {
        this.form.title = "";
        this.form.sort = 0;
        this.form.source = "";
        this.form.fileList = [];
        this.form.deltedContent = "";
        this.form.isTop = 0;
        this.form.ID = "";
      }
    },
    save(status) {
      if (!this.octopus.tools.verify(this.form, this.rules)) {
        return;
      }
      this.$confirm(`确定保存这个新闻吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
        center: true
      })
        .then(res => {
          this.update_api_1275(status);
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    getImgsUrl(fileList) {
      this.$set(this.form.fileList, 0, fileList[0]);
    },
    getQuillContent(e) {
      this.form.deltedContent = e;
    },
    update_api_1275(status) {
      let cellData = [
        { name: "Content", defaultValue: this.form.deltedContent }, // 新闻内容
        {
          name: "MainImageUrl",
          defaultValue: JSON.stringify(this.form.fileList)
        }, // 主图
        { name: "Name", defaultValue: this.form.title }, // 新闻标题
        { name: "Sort", defaultValue: this.form.sort }, // 排序优先级
        { name: "SourceID", defaultValue: this.form.source }, // 来源
        { name: "Status", defaultValue: status }, // 状态
        { name: "IsTop", defaultValue: this.form.isTop } // 是否置顶
      ];

      if (this.isEdit == "CREATE") {
        // 创建时间
        cellData.push({
          name: "CreateTime",
          defaultValue:
            new Date().toJSON().substring(0, 10) +
            " " +
            new Date().toTimeString().substring(0, 8)
        });
        // 创建人
        cellData.push({
          name: "CreateUserID",
          defaultValue: this.octopus.passport.id
        });
      }
      if (this.isEdit == "UPDATE") {
        // 维护时间
        cellData.push({
          name: "UpdateTime",
          defaultValue:
            new Date().toJSON().substring(0, 10) +
            " " +
            new Date().toTimeString().substring(0, 8)
        });
        // 维护人
        cellData.push({
          name: "UpdateUserID",
          defaultValue: this.octopus.passport.id
        });
      }

      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1275,
          type: this.isEdit,
          value: this.isEdit == "CREATE" ? "" : this.form.ID,
          cellData: cellData,
          paramData: {}
        },
        data => {
          if (data.status.code == 200) {
            this.drawer = false;
            this.octopus.tips.success("操作成功。");
            this.$emit("reload");
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    api_1297() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1297,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" }, // Name
            { name: "ParentkeyValue" } // ParentkeyValue
          ],
          paramData: {}
        },
        data => {
          if (data.status.code == 200) {
            this.sourceList = data.content.queryData;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    beforeUpload(file) {

      const isPM4 = file.type === 'video/mp4';
      const isLt2M = file.size / 1024 / 1025 < 100;
      if (!isPM4) {
        this.$message.error('上传视频只能是MP4 格式!');
        return false
      } else if (!isLt2M) {
        this.$message.error('上传视频大小不能超过 100MB!');
        return false
      }
      return true
    },
    httpRequest({ file }) {
      
      this.octopus.request.api.upload(file,
        () => {

        },
        (fileData) => {
          if (fileData.status.code == 200) {
            this.videoUrl = this.octopus.config.url +  fileData.content.url;
            
          }
        });
    }
  }
};
</script>
<style scoped>
.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #f78c53;
  cursor: pointer;
}

.tips {
  margin-bottom: 20px;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
  padding-left: 2px;
}

>>>.el-radio__input.is-checked+.el-radio__label {
  color: #f87338;
}

>>>.el-radio__input.is-checked .el-radio__inner {
  border-color: #f87338;
  background: #f87338;
}

.video {
  width: 100%;
  height: 100%;
}
</style>